<template>
  <a-card :bordered="false" style="width: 100%;border-radius: 4px">
    <div class="searchForm">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item :label="`订单编号`">
              <a-input placeholder="请输入订单编号" v-model="form.ordNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`订单状态`">
              <a-select v-model="form.ordStatus" placeholder="请选择订单状态" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  待确认/支付
                </a-select-option>
                <a-select-option value="02">
                  备货中
                </a-select-option>
                <a-select-option value="03">
                  已发货
                </a-select-option>
                <a-select-option value="04">
                  已取消
                </a-select-option>
                <a-select-option value="05">
                  已完成
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`售后状态`">
              <a-select v-model="form.afterSaleStatus" placeholder="请选择售后状态" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  退货中-用户申请
                </a-select-option>
                <a-select-option value="02">
                  退货中-商家同意退货
                </a-select-option>
                <a-select-option value="03">
                  退货中-客服仲裁
                </a-select-option>
                <a-select-option value="04">
                  已关闭-退货失败
                </a-select-option>
                <a-select-option value="05">
                  退货中-客服同意
                </a-select-option>
                <a-select-option value="06">
                  退货中-用户填写物流
                </a-select-option>
                <a-select-option value="07">
                  退货成功-商户同意
                </a-select-option>
                <a-select-option value="08">
                  退货中-再次客服仲裁
                </a-select-option>
                <a-select-option value="09">
                  退货成功-客服同意
                </a-select-option>
                <a-select-option value="10">
                  退货-用户取消
                </a-select-option>
                <a-select-option value="11">
                  退款成功-售后退款
                </a-select-option>
                <a-select-option value="12">
                  退货中-再次用户申请
                </a-select-option>
                <a-select-option value="13">
                  退货成功-商户已退款
                </a-select-option>
                <a-select-option value="14">
                  退货中-商家拒绝退货
                </a-select-option>
                <a-select-option value="15">
                  退货失败
                </a-select-option>
                <a-select-option value="16">
                  退货中-商家再次拒绝
                </a-select-option>
                <a-select-option value="17">
                  退货中-退款申请
                </a-select-option>
                <a-select-option value="18">
                  退款申请取消
                </a-select-option>
                <a-select-option value="19">
                  退款成功-商家同意
                </a-select-option>
                <a-select-option value="20">
                  退款中-商家拒绝
                </a-select-option>
                <a-select-option value="21">
                  退款中-客服仲裁
                </a-select-option>
                <a-select-option value="22">
                  退款中-客服同意
                </a-select-option>
                <a-select-option value="23">
                  退款中-退款失败
                </a-select-option>
                <a-select-option value="24">
                  已关闭-退款失败
                </a-select-option>
                <a-select-option value="25">
                  退款中-线下退款成功
                </a-select-option>
                <a-select-option value="26">
                  退款中-退款成功
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`业务类型`">
              <a-select v-model="form.bizType" placeholder="请选择业务类型" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  鲁班广告
                </a-select-option>
                <a-select-option value="02">
                  精选联盟
                </a-select-option>
                <a-select-option value="03">
                  商城
                </a-select-option>
                <a-select-option value="04">
                  自主经营
                </a-select-option>
                <a-select-option value="05">
                  线索广告
                </a-select-option>
                <a-select-option value="06">
                  抖音门店
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`支付方式`">
              <a-select v-model="form.payType" placeholder="请选择支付方式" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  货到付款
                </a-select-option>
                <a-select-option value="02">
                  在线支付
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`商品名称/ID`">
              <a-input placeholder="请输入商品名称/ID" v-model="form.prdNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`快递公司`">
              <a-select v-model="form.expressOrg" placeholder="请选择快递公司" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  京东快递(常用)
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`快递单号`">
              <a-input placeholder="请输入快递单号" v-model="form.expressOrderNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`收货人姓名`">
              <a-input placeholder="请输入收货人姓名号" v-model="form.customName" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`收货人手机`">
              <a-input placeholder="请输入收货人手机" v-model="form.customTel" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`是否预售`">
              <a-select v-model="form.isPresell" placeholder="请选择是否预售" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  非预售
                </a-select-option>
                <a-select-option value="02">
                  预售
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`商品类型`">
              <a-select v-model="form.prdType" placeholder="请选择商品类型" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  普通商品
                </a-select-option>
                <a-select-option value="02">
                  代销商品
                </a-select-option>
                <a-select-option value="03">
                  虚拟商品
                </a-select-option>
                <a-select-option value="04">
                  闪购商品
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`APP渠道`">
              <a-select v-model="form.appChannel" placeholder="请选择商品类型" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  普通商品
                </a-select-option>
                <a-select-option value="02">
                  代销商品
                </a-select-option>
                <a-select-option value="03">
                  虚拟商品
                </a-select-option>
                <a-select-option value="04">
                  闪购商品
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`下单时间`">
              <a-range-picker v-model="createTime" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`完成时间`">
              <a-range-picker v-model="finishTime" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="searchTool">
      <a-button type="primary" @click="handleQuery">
        查询
      </a-button>
      <a-button :style="{marginLeft:'10px'}" @click="handleDownloadQuery">
        下载查询到的订单
      </a-button>
      <a-button :style="{marginLeft:'10px'}" @click="handleDownloadSend">
        下载可发货的订单
      </a-button>
    </div>
    <div class="searchTable">
      <a-table
        size="small"
        :rowKey="`ordNo`"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 10,total:total }"
        @change="tableChange">
        <template slot="prdInfo" slot-scope="text, record">
          <div style="width: 150px">
            <div style="width: 50px;float: left">
              <img :src="url + `/file/` + record.prd.prdImgCover " style="width:50px">
            </div>
            <div style="width: 100px;float: right;padding-left: 10px">
              <h3>{{ record.prd.prdName }}</h3>
              <h5>{{ record.prd.prdSubName }}</h5>
            </div>
          </div>
        </template>
        <template slot="customInfo" slot-scope="text, record">
          <div style="width: 100px">
            <span>{{ record.customName }}</span>
            <br>
            <span>{{ record.customTel }}</span>
          </div>
        </template>
        <template slot="realPrice" slot-scope="text, record">
          ￥{{ record.realPrice }}
        </template>
        <template slot="prdPrice" slot-scope="text, record">
          ￥{{ record.prd.prdPrice }}
        </template>
        <template slot="count" slot-scope="text, record">
          x{{ record.count }}
        </template>
        <template slot="afterSaleStatus" slot-scope="text, record">
          <span v-if="record.afterSaleStatus==`01`">
            退货中-用户申请
          </span>
          <span v-if="record.afterSaleStatus==`02`">
            退货中-商家同意退货
          </span>
          <span v-if="record.afterSaleStatus==`03`">
            退货中-客服仲裁
          </span>
          <span v-if="record.afterSaleStatus==`04`">
            已关闭-退货失败
          </span>
          <span v-if="record.afterSaleStatus==`05`">
            退货中-客服同意
          </span>
          <span v-if="record.afterSaleStatus==`06`">
            退货中-用户填写物流
          </span>
          <span v-if="record.afterSaleStatus==`07`">
            退货成功-商户同意
          </span>
          <span v-if="record.afterSaleStatus==`08`">
            退货中-再次客服仲裁
          </span>
          <span v-if="record.afterSaleStatus==`09`">
            退货成功-客服同意
          </span>
          <span v-if="record.afterSaleStatus==`10`">
            退货-用户取消
          </span>
          <span v-if="record.afterSaleStatus==`11`">
            退款成功-售后退款
          </span>
          <span v-if="record.afterSaleStatus==`12`">
            退货中-再次用户申请
          </span>
          <span v-if="record.afterSaleStatus==`13`">
            退货成功-商户已退款
          </span>
          <span v-if="record.afterSaleStatus==`14`">
            退货中-商家拒绝退货
          </span>
          <span v-if="record.afterSaleStatus==`15`">
            退货失败
          </span>
          <span v-if="record.afterSaleStatus==`16`">
            退货中-商家再次拒绝
          </span>
          <span v-if="record.afterSaleStatus==`17`">
            退货中-退款申请
          </span>
          <span v-if="record.afterSaleStatus==`18`">
            退款申请取消
          </span>
          <span v-if="record.afterSaleStatus==`19`">
            退款成功-商家同意
          </span>
          <span v-if="record.afterSaleStatus==`20`">
            退款中-商家拒绝
          </span>
          <span v-if="record.afterSaleStatus==`21`">
            退款中-客服仲裁
          </span>
          <span v-if="record.afterSaleStatus==`22`">
            退款中-客服同意
          </span>
          <span v-if="record.afterSaleStatus==`23`">
            退款中-退款失败
          </span>
          <span v-if="record.afterSaleStatus==`24`">
            已关闭-退款失败
          </span>
          <span v-if="record.afterSaleStatus==`25`">
            退款中-线下退款成功
          </span>
          <span v-if="record.afterSaleStatus==`26`">
            退款中-退款成功
          </span>
        </template>
        <template slot="bizType" slot-scope="text, record">
          <span v-if="record.bizType=='01'">
            鲁班广告
          </span>
          <span v-if="record.bizType=='02'">
            精选联盟
          </span>
          <span v-if="record.bizType=='03'">
            商城
          </span>
          <span v-if="record.bizType=='04'">
            自主经营
          </span>
          <span v-if="record.bizType=='05'">
            线索广告
          </span>
          <span v-if="record.bizType=='06'">
            抖音门店
          </span>
        </template>
        <template slot="payType" slot-scope="text, record">
          <span v-if="record.payType=='01'">
            货到付款
          </span>
          <span v-if="record.payType=='02'">
            在线支付
          </span>
        </template>
        <template slot="ordStatus" slot-scope="text, record">
          <span v-if="record.ordStatus=='01'">
            待确认/支付
          </span>
          <span v-if="record.ordStatus=='02'">
            备货中
          </span>
          <span v-if="record.ordStatus=='03'">
            已发货
          </span>
          <span v-if="record.ordStatus=='04'">
            已取消
          </span>
          <span v-if="record.ordStatus=='05'">
            已完成
          </span>
        </template>
      </a-table>

      <!--      <a-tabs default-active-key="1" size="small">-->
      <!--        <a-tab-pane key="1" tab="全部">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="2" tab="待确认">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="3" tab="待支付">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="4" tab="备货中">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="5" tab="已发货">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="6" tab="已完成">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="7" tab="已关闭">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="8" tab="未发货退款">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="9" tab="已发货退款">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="10" tab="退款中">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="11" tab="24h内需发货">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="12" tab="超时未发货">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="13" tab="催发货">-->
      <!--          <a-table :columns="columns" :data-source="data" :style="{marginTop:'-15px'}"/>-->
      <!--        </a-tab-pane>-->
      <!--      </a-tabs>-->
    </div>
  </a-card>
</template>

<script>
  import { queryOrd } from '@/api/ord'

  const columns = [
    {
      title: '子订单编号',
      dataIndex: 'ordNo',
      key: 'ordNo'
    },
    {
      title: '商品',
      scopedSlots: { customRender: 'prdInfo' }
    },
    {
      title: '单价',
      scopedSlots: { customRender: 'prdPrice' }
    },
    {
      title: '数量',
      scopedSlots: { customRender: 'count' }
    },
    {
      title: '备注',
      key: 'ordDesc',
      dataIndex: 'ordDesc'
    },
    {
      title: '售后',
      scopedSlots: { customRender: 'afterSaleStatus' }
    },
    {
      title: '业务类型',
      scopedSlots: { customRender: 'bizType' }
    },
    {
      title: '支付方式',
      scopedSlots: { customRender: 'payType' }
    },
    {
      title: '收货信息',
      scopedSlots: { customRender: 'customInfo' }
    },
    {
      title: '订单状态',
      scopedSlots: { customRender: 'ordStatus' }
    },
    {
      title: '实收款',
      scopedSlots: { customRender: 'realPrice' }
    }
  ]

  const data = []
  export default {
    // 订单管理
    name: 'ManageOrder',
    data () {
      return {
        url: process.env.VUE_APP_API_BASE_URL,
        form: {
          ordNo: '',
          ordStatus: '',
          afterSaleStatus: '',
          bizType: '',
          payType: '',
          prdNo: '',
          expressOrg: '',
          expressOrderNo: '',
          customName: '',
          customTel: '',
          isPresell: '',
          prdType: '',
          appChannel: ''
        },
        columns: columns,
        data: data,
        total: 0,
        createTime: [],
        finishTime: []
      }
    },
    methods: {
      handleQuery () {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.finishTime && this.finishTime.length > 0) {
          this.form.finishTime1 = this.finishTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.finishTime2 = this.finishTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.pageNumb = 1
        this.form.pageSize = 10
        console.log(this.form)
        queryOrd(this.form).then(rsp => {
          this.total = rsp['total']
          this.data = rsp['data']
        })
      },
      handleDownloadQuery () {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.finishTime && this.finishTime.length > 0) {
          this.form.finishTime1 = this.finishTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.finishTime2 = this.finishTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        let url = process.env.VUE_APP_API_BASE_URL + '/ord/download?'
        Object.keys(this.form).forEach(key => {
          url = url + '&' + key + '=' + this.form[key]
        })
        window.open(url, '_blank')
      },
      handleDownloadSend () {
        const url = process.env.VUE_APP_API_BASE_URL + '/ord/download?ordStatus=02'
        window.open(url, '_blank')
      },
      tableChange (pagination) {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.finishTime && this.finishTime.length > 0) {
          this.form.finishTime1 = this.finishTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.finishTime2 = this.finishTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.pageNumb = pagination.current
        queryOrd(this.form).then(rsp => {
          this.total = rsp['total']
          this.data = rsp['data']
        })
      }
    },
    mounted () {
      this.handleQuery()
    }
  }
</script>

<style scoped>
  .searchTool {
    margin-top: 20px;
    float: right;
  }

  .searchTable {
    margin-top: 20px;
    float: left;
    width: 100%;
  }
</style>
